<style type="text/css">
.customp p {
    width: 280px;
}
</style>
<div class="pageContent">
    <form method="post" id=processOperationForm name="processOperationForm"
        action="" class="pageForm required-validate">
        <div class="pageFormContent customp">
            <input type="hidden" id="processOprationIds"
                name="processOprationIds" /> <input type="hidden" name="navTabId"
                value="${navTabId!''}" />
            <p>
                <label><@label key='cmprocess_code.C,colon'>工艺编号：</@label></label>
                <input type="text" name="processCode" maxlength="20"
                    readonly="readonly" value="${processModel.processCode!''}">
            </p>
            <p>
                <label><@label key='cmprocessrev.C,colon'>版本号：</@label></label>
                <input type="text" name="processRev" maxlength="20" value="${processModel.processRev!''}" readonly class="required" />
            </p>
            <p>
                <label><@label key='cmprocess_name.C,colon'>工艺名称：</@label></label>
                <input type="text" name="processText" maxlength="60"
                    readonly="readonly" value="${processModel.processText!''}" />
            </p>
            <p class="notnormal">
                <label><@label key='effectiveDate.C,colon'>生效时间：</@label></label>
                <input type="text" name="effectiveDate" readonly class="required text" value="${(processModel.effectiveDate?string('yyyy-MM-dd HH:mm:ss'))?if_exists}" mindate="%y-%M-%d" max_Date="{expirationDate}" datefmt="yyyy-MM-dd HH:mm:ss"/>
            </p>
            <p class="notnormal">
                <label><@label key='expirationDate.C,colon'>失效时间：</@label></label>
                <input type="text" name="expirationDate" readonly class="text" value="${(processModel.expirationDate?string('yyyy-MM-dd HH:mm:ss'))?if_exists}" min_Date="{effectiveDate}" datefmt="yyyy-MM-dd HH:mm:ss"/>
            </p>
            <p>
                <label><@label key='workCenter_type.C,colon'>工作中心类型：</@label></label>
                <input name="workCenterTypeCode" id="workCenterType.code"
                    value="${processModel.workCenterTypeCode!''}" type="hidden" /> <input
                    class="required" name="workCenterTypeText"
                    id="workCenterType.name" type="text"
                    value="${processModel.typeText!''}" readonly="true" />
            </p>
            <p>
                <label><@label key="lockFlag.C,colon">锁定标记：</@label></label>
                <label><input style="margin-right: 2px;" type="checkbox" name="lockFlag" value="1" <#if (processModel.lockFlag)?? && (processModel.lockFlag == 1)> checked="true"</#if> disabled="disabled"><@label key="lock.C">锁定</@label></label>
            </p>
        </div>
    </form>
    <#if processModel??> <#assign createInfo=processModel/> <#include
    "/common/createInfo_width.html"> </#if>
    <div class="unitBox" style="float: left; display: block; overflow: hidden; width: 55%; background: #fff; border-bottom: 1px #d8dfe5 solid;border-left: 1px #d8dfe5 solid;border-right: 1px #d8dfe5 solid">
        <input type="hidden" id="processOprationId_selected" /> <!-- 暂存选择的工艺id -->
        <input type="hidden" id="processOprationType_selected" /><!-- 暂存选择的工艺类型 -->
        <table id="processOprationTable" class="table" style="width: 100%;"
            layoutH="225">
            <thead>
                <tr>
                    <th width="50"><@label key="operation.C,serialNumber.C">工序序号</@label></th>
                    <th width="50"><@label key="operationCode.C">工序编号</@label></th>
                    <th width="80"><@label key="operation.C,name.C">工序名称</@label></th>
                    <th width="50"><@label key="operationType.C">工序类型</@label></th>
                    <th width="60"><@label key="workUnitType.C">作业单元类型</@label></th>
                    <th width="40"><@label key="confirmPoint.C">确认点</@label></th>
                </tr>
            </thead>
            <tbody>
                <#if processOperations??> <#list processOperations as pop>
                <tr id="${pop.id!''}" type="${pop.operationTypeEcode!''}"
                    onclick="processOperationViewJs._showProcessAttachment(this);">
                    <td>${pop.operationOrdinal!''}</td>
                    <td>${pop.operationCode!''}</td>
                    <td>${pop.operationText!''}</td>
                    <td>
                        <#if operationTypeECode??>
                         <#list operationTypeECode as eCode>
                         <#if eCode.eCode==pop.operationTypeEcode>
                            ${eCode.eCodeText!''}
                        </#if>
                        </#list> 
                        </#if>
                    </td>
                    <td>${pop.typeText!''}</td>
                    <td><#if pop.confirmFlag == 1><@label
                        key='yes.C'>是</@label><#else><@label key='no.C'>否</@label></#if></td>
                </tr>
                </#list> </#if>
            </tbody>
        </table>
    </div>
    <div class="unitBox" style="float: right; display: block; overflow: hidden; width: 44%; background: #fff; border-bottom: 1px #d8dfe5 solid;">
        <div class="tabs">
            <div class="tabsHeader">
                <div class="tabsHeaderContent">
                    <ul>
                        <li id="component" data-selectedid="processOperation_component"
                            class="exerInputS"><a href="javascript:;" id="select1"><span><@label key='attachment.C'>工艺附件</@label></span></a></li>
                        <li id="Capacity" data-selectedid="processOperation_Capacity" 
                        	class="exerInputS"><a href="javascript:;" id="select4"><span><@label key='cmprocessCapacity.C'>工艺产能</@label></span></a></li>                            
                        <li id="attachment" data-selectedid="processOperation_attachment"
                            class="exerInputS"><a href="javascript:;" id="select2"><span><@label key='component.C'>组件</@label></span></a></li>
                        <li id="attachment" data-selectedid="processOperation_quality" class="exerInputS"><a href="javascript:;" id="select2"><span><@label key='qualityOperation.C'>质量工序设置</@label></span></a></li>
                            
                    </ul>
                </div>
            </div>
            <div class="tabsContent">
                <div>
                    <table class="table" style="width: 100%;" layoutH="261"
                        id="processAttachMentTable">
                        <thead>
                            <tr>
                                <th width="100px"><@label key='fileName.C'>文件名称</@label></th>
                                <th width="100px"><@label key='fileSize.C'>文件大小(bytes)</@label></th>
                                <th width="100px"><@label key='version.C'>版本</@label></th>
                                <th width="50px"><@label key="opera.C">操作</@label></th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <div>
	                <table id="processCapacityTable" class="table canopration" style="width: 100%;" layoutH="261">
	                    <thead>
	                        <tr>
	                            <th width="70px"><@label key="workUnitCode.C">作业单元编号</@label></th>
	                            <th width="70px"><@label key="workUnitText.C">作业单元名称</@label></th>
	                            <th width="50px"><@label key="standardCapacity.C">标准产能</@label></th>
	                            <th width="70px"><@label key="standardHours.C">标准用时</@label></th>
	                        </tr>
	                    </thead>
	                    <tbody>
	                    </tbody>
	                </table>
	            </div>
                <div>
                    <table id="processComponentTable" class="table"
                        style="width: 100%;" layoutH="261">
                        <thead>
                            <tr>
                                <th width="50px"><@label key="component.C,code.C">组件编号</@label></th>
                                <th width="100px"><@label key="component.C,name.C">组件名称</@label></th>
                                <th width="30px"><@label key="quantity.C">数量</@label></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div>
                <div class="pageHeader">
                    <fieldset class="pageFormContent">
                        
                        <dl>
                            <dt>选择采集方式</dt>
                            <dd>
                                <input type="checkbox" name="textcollectFlag" disabled="disabled" value="1"/>文本
                                <input type="checkbox" name="graphcollectFlag" disabled="disabled" value="1"/>图形
                            </dd>
                        </dl>
                        <dl>
                            <dt>默认采集方式</dt>
                            <dd>
                                <select name="collectModeEcode" disabled="disabled">
                                    <#if defectcollectMode??>
                                        <#list defectcollectMode as ecode>
                                            <option value="${ecode.eCode!''}">${ecode.eCodeText!''}</option>
                                        </#list>
                                    </#if>
                                </select>
                            </dd>
                        </dl>
                    </fieldset>        
                </div>
                <table class="table canopration" style="width: 100%;" layoutH="354" id="processInspectPicTable">
                    <thead>
                        <tr>
                            <th width="100px"><@label key='fileName.C'>文件名称</@label></th>
                            <th width="100px"><@label key='fileSize.C'>文件大小(bytes)</@label></th>
                            <th width="50px"><@label key="opera.C">操作</@label></th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="formBar">
    <ul>
        <!--                 <li><div class="buttonActive" onclick="navTab.openTab('add_process_tab', ${rc.getContextPath()}/manage/process/editProcess?id=${processModel.processCode!''}&navTabId=${navTabId!''}, { title:<@label key='edit.B'>编辑</@label>, fresh:false, data:{} });"><div class="buttonContent"><button type="button">编辑</button></div></div></li>
 -->
        <li>
            <div class="buttonActive">
                <div class="buttonContent">
                    <button type="button" class="close"><@label
                        key="close.B">关闭</@label></button>
                </div>
            </div>
        </li>
    </ul>
</div>
</div>
<script type="text/javascript">
$(function(){
    setTimeout(function(){
        $($process_jtabs[2]).hide();
        $($process_jgroups[2]).hide();
        $($process_jtabs[3]).hide();
        $($process_jgroups[3]).hide();
        $("div#uploadProcessInspectPicture").hide();
    }, 0);
})
    var processViewDialog = $.pdialog.getCurrent();
    
    var $process_jTabHeader = $("> .tabsHeader", $("div.tabs", processViewDialog));
    
    var $process_jtabs = $(">.tabsHeaderContent>ul li", $process_jTabHeader);
    
    var $process_jgroups = $("> .tabsContent > *", $("div.tabs", processViewDialog));
    
    var processOperationViewJs = {
    
            _showProcessAttachment : function(_this) {    
                var $trs = $("#processOprationTable .gridTbody", processViewDialog).find('tr');
                $trs.filter(".selected").removeClass("selected");
                $(_this).addClass("selected");
                var _popId = $(_this).attr("id");
                var operationTypeEcode = $(_this).attr("type");
                
                if(operationTypeEcode == "QUALITY"){
                    processOperationViewJs._qualitytabsShow();
                }else{
                    processOperationViewJs._productiontabsShow();
                }
                if(_popId){
                    processOperationViewJs._clearCompAndOperation();
                    $.DWZajax({
                        url:hostUrl +"/process/fechProcessAttachmentAndComment",
                        data:{'id':_popId},
                        callback:function(data){
                            if(data){
                                var atts = data.attachment;
                                if(atts && atts.length > 0){
                                    for(var i=0; i<atts.length; i++){
                                        processOperationViewJs._addProcessAttachment(atts[i]);
                                    }
                                }
                              	//工序作业单元产能
                                var capacits = data.capacity;
                                if(capacits && capacits.length > 0){
                                	for(var i=0; i<capacits.length; i++){
                                		processOperationViewJs._addProcessCapacity(capacits[i]);
                                    }
                                }
                                //质量工序
                                if(data.operationTypeEcode && data.operationTypeEcode=="QUALITY"){
                                    $("select[name='collectModeEcode']").val(data.collectModeEcode);
                                    if(data.textcollectFlag == 1)$("input[name='textcollectFlag']",processViewDialog).attr("checked",true);
                                    if(data.graphcollectFlag ==1)$("input[name='graphcollectFlag']",processViewDialog).attr("checked",true);
                                    var picture = data.picture;
                                    if(picture && picture.length > 0){
                                        for(var i=0; i<picture.length; i++){
                                            processOperationViewJs._addProcessInspectPic(picture[i]);
                                        }
                                    }
                                    
                                }else{//生产工序
                                    var component = data.component;
                                    if(component && component.length > 0){
                                        for(var i=0; i<component.length; i++){
                                            processOperationViewJs._addProcessComponent(component[i]);
                                        }
                                    }
                                }
                            }
                        }
                    });
                }
            },

        _qualitytabsShow : function() {
            $($process_jtabs[0]).addClass("selected");
            $($process_jtabs[3]).show();
            $($process_jtabs[3]).removeClass("selected");
            $($process_jgroups[0]).show();
            $($process_jtabs[2]).hide();
            $($process_jgroups[2]).hide();
            $($process_jtabs[1]).show();
            $($process_jgroups[1]).hide();
        },
        
        _productiontabsShow : function() {
            $($process_jtabs[3]).hide();
            $($process_jgroups[3]).hide();
            $($process_jtabs[1]).show();
            $($process_jtabs[1]).removeClass("selected");
            $($process_jgroups[1]).hide();
            $($process_jtabs[0]).addClass("selected");
            $($process_jgroups[0]).show();
            $($process_jtabs[2]).show();
            $($process_jtabs[2]).removeClass("selected");
            $($process_jgroups[2]).hide();
        },
        
        _addProcessAttachment : function(data) {
            if(!data)
                return;
            var gridTheadTh = $("#processAttachMentTable", processViewDialog).find("table thead th");
            var tr = "<tr id="+data.processOperationID+"_"+data.saveName+">";
            tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div>"+data.fileName+"</div></td>";
            tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>"+Math.round(data.fileSize/1024)+"kb</div></td>";
            tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div>"+data.version+"</div></td>";
            tr += "<td style='width:"+$(gridTheadTh[3]).width()+"px'>";
            tr += "<a title='<@label key='download.B'>下载</@label>' target='dwzExport' class='btnAttach' href='${rc.getContextPath()}/manage/common/downloadAttachement?attachmentCode="+data.attachmentCode+"&fileName="+data.fileName+"'></a></td>"
            tr += "</tr>";
            $("#processAttachMentTable .gridTbody", processViewDialog).find("table tbody").append(tr);
        },
        
        _addProcessInspectPic : function(data) {
            if(!data)
                return;
            var gridTheadTh = $("#processInspectPicTable", processViewDialog).find("table thead th");
            var tr = "<tr id=processInspectPic_"+data.id+">";
            tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div>"+data.fileName+"</div></td>";
            tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>"+Math.round(data.fileSize/1024)+"kb</div></td>";
            tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'>";
            tr += "<a title='<@label key='download.B'>下载</@label>' target='dwzExport' class='btnAttach' href='${rc.getContextPath()}/manage/common/downloadAttachement?attachmentCode="+data.attachmentCode+"&fileName="+data.fileName+"'></a></td>"
            tr += "</tr>";
            $("#processInspectPicTable .gridTbody", processViewDialog).find("table tbody").append(tr);
        },
        
        _addProcessComponent : function(data) {
            if(!data || !data.processOperationID)
                return;
            var gridTheadTh = $("#processComponentTable", processViewDialog).find("table thead th");
            var _id = data.processOperationID+"_"+data.componentCode;
            var tr = "<tr id="+_id+">";
            tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div>"+data.componentCode+"</div></td>";
            tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>"+data.componentText+"</div></td>";
            tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div>"+data.quantity+"</div></td>";
            tr += "</tr>";
            $("#processComponentTable .gridTbody", processViewDialog).find("table tbody").append(tr);
        },
        
        _addProcessCapacity : function(data) {
            if(!data || !data.processOperationID)
                return;
            var gridTheadTh = $("#processCapacityTable", processViewDialog).find("table thead th");
            var _id = data.processOperationID+"_"+data.workUnitCode;
            var tr = "<tr id="+_id+">";
            tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div>"+data.workUnitCode+"</div></td>";
            if(data.workUnitText==null){
				tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div></div></td>";
            }else{
            	tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>"+data.workUnitText+"</div></td>";
            }
            tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div>"+data.standardCapacity+"</div></td>";
            tr += "<td style='width:"+$(gridTheadTh[3]).width()+"px'><div>"+data.standardHours+"</div></td>";
            tr += "</tr>";
            $("#processCapacityTable .gridTbody", processViewDialog).find("table tbody").append(tr);
        },

        _clearCompAndOperation : function() {
            $("#processAttachMentTable .gridTbody", processViewDialog).find("table tbody").html("");
            $("#processComponentTable .gridTbody", processViewDialog).find("table tbody").html("");
            $("#processInspectPicTable .gridTbody", processViewDialog).find("table tbody").html("");
            $("#processCapacityTable .gridTbody", processViewDialog).find("table tbody").html("");
            $("input[name='textcollectFlag']", processViewDialog).attr("checked",false);
            $("input[name='graphcollectFlag']", processViewDialog).attr("checked",false);
        }

    }
</script>
